@import "elements";
@import "icons";

/* https://github.com/acdvorak/intellij-lessc-plugin */
@defaultFont: Trebuchet MS, Tahoma, Arial;
@middleGrey: #888;
@brightHover: #44f;
@scrollbarWidth: 13px;

body
{
	background-color: #000;
	margin: 0;
	padding: 0;
	font-family: @defaultFont;
	overflow: hidden;
}

a
{
	text-decoration: none;
	color: #555;
	cursor: pointer;

	&:hover { color: #000; }
}

#photo
{
	position: absolute;
	z-index: 18;

	img { position: absolute; }
}

#caption
{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 25;

	.bar
	{
		width: 100%;
		background-color: #000;
		color: #eee;
		margin: 0;
		padding: 0 10px;
		.opacity(0.7);

		.date-taken
		{
			position: absolute;
			right: 10px;
			top: 0;
		}
		button { display: none; }
	}

	.scrollbar
	{
		position: relative;
		float: right;
		width: @scrollbarWidth;

		.track
		{
			background-color: #eee;
			height: 100%;
			width: @scrollbarWidth;
			position: relative;
			padding: 0;

			> i { position: absolute; left: 0; .opacity(0.1); z-index: 10; }
			.icon-chevron-up { top: 0; }
			.icon-chevron-down { bottom: 2px; }

			&:hover > i { .opacity(0.5); cursor: pointer; }
		}

		.thumb
		{
			height: 20px;
			width: @scrollbarWidth;
			cursor: pointer;
			overflow: hidden;
			position: absolute;
			top: 0;
			z-index: 20;
			border-top: 1px solid #fff;
			border-bottom: 1px solid #fff;
			.box-sizing(border-box);
			.opacity(0.3);

			i { .opacity(0.1); position: absolute; left: 0; top: 50%; margin-top: (@size - 4) * -1; }

			.end { overflow: hidden; height: 5px; width: @scrollbarWidth; }

			&:hover { .opacity(1); }
		}
		.thumb .end,
		.thumb { background-color: #777; }


		.disable { display: none; }
	}

	.content
	{
		.viewport
		{
			overflow: hidden;
			position: relative;
			height: 50px;
			background-color: #fff;

			.overview { position: absolute; top: 0; left: 0; }

			.description
			{
				font-family: Georgia, Times New Roman, Times;
				margin: 0;
				padding: 5px 12px 10px 12px;
				font-size: 15px;
				line-height: 17px;

				p
				{
					text-indent: 30px; margin: 4px 0 0 0; padding: 0;
					.first, .haiku { margin-top: 0; text-indent: 0; }
					.haiku
					{
						font-size: 18px;
						line-height: 22px;
						padding: 3px 0 6px 10px;
						font-style: italic;
					}
				}

				sup { color: #208; vertical-align: top; font-size: 20px; }
				p:first-child { text-indent: 0; }

				div.footnotes
				{
					border-top: 1px solid #ddd;
					padding-top: 4px;
					font-family: @defaultFont;
					font-size: 13px;
					margin-top: 15px;

					p { text-indent: 0; margin: 0; padding-left: 15px; line-height: 14px; }
					sup { font-size: 13px; padding-right: 6px; }

					a:hover { color: @brightHover; }
				}
			}
		}
	}

	.brand
	{
		position: absolute;
		right: 4px;
		top: -39px;
		width: 30px;
		height: 30px;
		.rounded(4px);
		border: 2px solid #fff;
		background-color: #ddd;
		background-image: url(/image/logo.png);
		background-repeat: no-repeat;
		background-position: bottom right;
		background-size: 100%;
		.opacity(0.7);
		cursor: pointer;

		&:hover { .opacity(1); }
	}
}

/* navigation -------------------------------------------------------------- */

.edge
{
	position: absolute;
	z-index: 25;
	top: 0;
	bottom: 0;
	width: 160px;

	.nav
	{
		position: absolute;
		z-index: 25;
		top: 260px;
		cursor: pointer;
		width: 35px;
		height: 58px;
		background-repeat: no-repeat;
	}
}
#leftEdge { left: 0; }
#rightEdge { right: 0; }
#previous { left: 18px; background-image: url(/image/left-arrow.png); }
#next { right: 21px; background-image: url(/image/right-arrow.png); }